<template>
  <div>
    <div class="home">
      <div class="itemContainer"
       v-for="(item,index) in list" 
       :key="index"
       @click="onClick(item)"
       >
        <img :src="item.productImage" alt />
        <div>{{item.productName}}</div>
      </div>
      <div class="img" v-myShow="isLoading">
        <img src="../assets/loading.gif" alt />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import { directive } from 'vue/types/umd'
export default {
  data() {
    return {
      list: [],
      isLoading: false,
    };
  },
  methods: {
    onscroll() {
      var doc = document.documentElement.scrollTop;
      console.log(document.documentElement.clientHeight)
      var docHeight = document.documentElement.scrollHeight;
      var cliHeight = document.documentElement.clientHeight;

      if (docHeight - doc - cliHeight == 0) {
          this.isLoading = true;
        setTimeout(() => {
          axios.get("http://localhost:8080/data2.json").then((res) => {
            // console.log(res.data.result.list)
            this.list = [...this.list,...res.data.result.list];
            this.isLoading = false;
          });
        }, 3000);
        // console.log(1111111111111)
      
      }
    },
    onClick(item){
      // console.log(item)
      this.$router.push({
        path:'/about',
        query:{
          item:item
        }
      })
    }
  },
  created() {
    axios.get("http://localhost:8080/data.json").then((res) => {
      // console.log(res.data.result.list)
      this.list = res.data.result.list;
    });

    window.addEventListener("scroll", this.onscroll);
  },
  directives: {
    myShow: {
      inserted: function (el, binding) {
        if (binding.value) {
          el.style.visibility = "visible";
        } else {
          el.style.visibility = "hidden";
        }
      },
      update: function (el, binding) {
        if (binding.value) {
          el.style.visibility = "visible";
        } else {
          el.style.visibility = "hidden";
        }
      },
    },
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.itemContainer {
  width: 20%;
  height: 350px;
  margin-top: 20px;
  border: 1px solid red;
}
.itemContainer img {
  width: 100%;
}
.img {
  width: 100%;
  height: 150px;
}
.img img {
  width: 100px;
  margin-top: 10px;
}
</style>